<template>
    <div>
        <!-- 图片弹出层 -->
        <el-dialog v-el-drag-dialog id="_img_dialog" width="600px" :visible.sync="imgInfo.dialogVisible" :title="imgInfo.title" :modal="false">
            <div style="text-align:center;" id="_img_container">
                <img :src="imgInfo.src" style="max-width:100%" >
            </div>
        </el-dialog>

        <!-- v-viewer弹出框 -->
        <div style="display:none" v-viewer="{movable: true}">
            <img width="200px"  id="_dialog_viewer" :src="imgInfo.src" :key="imgInfo.src">
        </div>

    </div>
</template>

<script>
import Vue from 'vue'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
export default {
    name: 'img.showImg', 
    data() {
        return {
            imgInfo:{
                title:'',
                dialogVisible: false, //普通图片弹出框
                //dialogViewerVisible: false, //v-viewer图片弹出层
                src:''	
            }
        };
    },
    methods: {
        open(e){ //点击clickable属性的图片触发
            if(typeof e === 'string'){
                this.openSrc(e);
                return;
            }
            if(e.target.parentElement && e.target.parentElement.id=='_img_container'){
                return false;
            }
            if( !(e.target && e.target.tagName==='IMG' && e.target.getAttribute('clickable')!=null) ){
                return false;
            }
            let _this = this;
            _this.imgInfo.title = '';
            _this.imgInfo.src = '';

            _this.imgInfo.dialogVisible = true;
            _this.imgInfo.src = e.target.getAttribute('src');
            let title = e.target.getAttribute('title');
            if(title){
                _this.imgInfo.title = title; 
            }
        },
        openSrc(src){ //直接传入图片地址
            this.imgInfo.title = '';
            this.imgInfo.dialogVisible = true;
            this.imgInfo.src = src;
        },
        openByArgs(args){ //传入图片对象信息
            this.imgInfo.dialogVisible = true;
            this.imgInfo.title = args.title || '';
            this.imgInfo.src = args.src || '';
        },
        openViewer(src){
            //this.imgInfo.dialogViewerVisible = true;
            this.imgInfo.src = src;  
            let _this = this;
            setTimeout(()=>{
                var oDiv = document.querySelector('.viewer-container');
                var oParent = document.querySelector('body');
                var sent = {
                    l: 0,
                    r: oParent.offsetWidth - oDiv.offsetWidth,
                    t: 0,
                    b: oParent.offsetHeight - oDiv.offsetHeight,
                    n: 10
                }
                _this.doDrag(oDiv, sent);
                document.getElementById("_dialog_viewer").click();
            }, 100);            
            return;

            /*setTimeout(()=>{
                document.getElementById("_dialog_viewer").click();
                let container = document.querySelector('.viewer-container');
                container.style.left=0;
                container.style.top=0;
                let obj = document.querySelector('.viewer-navbar');
                obj.draggable = true;
                let startX=0, startY = 0, mouseStop=false;
                obj.addEventListener('dragstart', event => {
                    startX = event.x;
                    startY = event.y;
                    console.log(event)
                })
                let tempX = 0, tempY = 0; 
                obj.addEventListener('drag', event => {
                    container.style.left = (container.offsetLeft + event.x - startX)+'px';
                    container.style.top = (container.offsetTop + event.y - startY)+'px';
                })
                obj.addEventListener('dragend', event => {
                    container.style.left = (container.offsetLeft + event.x - startX)+'px';
                    container.style.top = (container.offsetTop + event.y - startY)+'px';
                    console.log(event)  
                })
            }, 100);*/
        },
        doDrag(obj, sent){
            var dmW = document.documentElement.clientWidth || document.body.clientWidth;
            var dmH = document.documentElement.clientHeight || document.body.clientHeight;
            var sent = sent || {};
            var l = sent.l || 0;
            var r = sent.r || dmW - obj.offsetWidth;
            var t = sent.t || 0;
            var b = sent.b || dmH - obj.offsetHeight;
            var n = sent.n || 10;
            obj.onmousedown = function(ev) {
                var oEvent = ev || event;
                var sentX = oEvent.clientX - obj.offsetLeft;
                var sentY = oEvent.clientY - obj.offsetTop;
                document.onmousemove = function(ev) {
                    var oEvent = ev || event;
                    var slideLeft = oEvent.clientX - sentX;
                    var slideTop = oEvent.clientY - sentY;
                    if (slideLeft <= l) {
                        slideLeft = l;
                    }
                    if (slideLeft >= r) {
                        slideLeft = r;
                    }
                    if (slideTop <= t) {
                        slideTop = t;
                    }
                    if (slideTop >= b) {
                        slideTop = b;
                    }
                    obj.style.left = slideLeft + 'px';
                    obj.style.top = slideTop + 'px';
                }
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            }
        }
    }
}
</script>
<style>
.viewer-container{width:50%;height:60%;left:23%;top:10%}
.viewer-canvas{left:-50%; top:-30%;}
.viewer-navbar img{display:none;}
</style>
